<template>
	<view class="bg-gradient">
		<!-- 头部数据 -->
		<view class="head">
			<view class="left">
				<uni-icons type="checkbox-filled" size="36" color="green"></uni-icons>
				<view class="text">已订餐</view>
				<view class="text-num">36</view>
			</view>
			<navigator class="right" url="/pages/ordering/his">
				<view>订餐历史</view>
				<uni-icons type="right" size="20"></uni-icons>
			</navigator>
		</view>
		<!-- 订餐信息 -->
		<view class="order">
			<uni-datetime-picker v-model="params.orderDates" type="daterange" rangeSeparator="至" @change="changeDate" />
			<scroll-view scroll-y="true" class="items">
				<view class=" item" v-for="(itemDate,index) in orderList">
					<view class="item-date"> {{ itemDate.orderDate | formatDate }}</view>
					<view class="item-food" v-for="(itemFood,index) in itemDate.foodList">
						<view class="left-food">
							<image class="left-food-img text" :src="itemFood.picture"></image>
						</view>
						<view class="right-food">
							<view class="right-name" :title="itemFood.name">{{ itemFood.name }}</view>
							<view class="">
								{{ orderType(itemFood.type) }}
							</view>
							<view class="last-line">
								<view class="price">{{ itemFood.price }}元</view>
								<uni-icons type="star" size="36" color="green" v-show="!itemFood.hasOrdered" title="预订"
									@click="handleOrder(itemFood, itemDate.orderDate)"></uni-icons>
								<uni-icons type="star-filled" size="36" color="green" v-show="itemFood.hasOrdered"
									title="取消预订" @click="handleCancelOrder(itemFood)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getMyOrderingListAPI
	} from "@/api/ordering/ordering.js"
	import {
		getDictListAPI
	} from "@/api/dict/dict.js"
	import {
		createRecordAPI,
		updateRecordAPI
	} from "@/api/record/index.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	import {
		toast
	} from "@/utils/common"

	export default {
		data() {
			return {
				orderList: {},
				orderTypeList: [],
				params: {
					orderDates: [
						parseTime(new Date(), "{y}-{m}-{d}") + " 00:00:00",
						parseTime(new Date(), "{y}-{m}-{d}") + " 23:59:59"
					],
				}
			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			async getList() {
				// 修改时间格式
				this.params.orderDates[0] = parseTime(this.params.orderDates[0], "{y}-{m}-{d}") + " 00:00:00"
				this.params.orderDates[1] = parseTime(this.params.orderDates[1], "{y}-{m}-{d}") + " 23:59:59"
				getMyOrderingListAPI(this.params).then(response => {
					this.orderList = response.data
					this.getDictList()
				})
			},
			// 修改日期后重新查询可订餐列表
			changeDate() {
				// 这里需要使用setTimeout方式，不然组件中的日期值不更新
				setTimeout(() => {
					this.getList()
				}, 0);
			},
			getDictList() {
				getDictListAPI({
					'dictType': 'ordering_type'
				}).then(response => {
					this.orderTypeList = response.data
				})
			},
			orderType(value) {
				const item = this.orderTypeList.find(item => item.value === value);
				return item ? item.label : '未知类型';
			},

			async handleOrder(food, orderDate) {
				food.orderDate = orderDate
				food.foodId = food.id
				food.id = null
				await createRecordAPI(food)
				toast('预定成功')
				await this.getList()
			},

			async handleCancelOrder(food) {
				food.foodId = food.id
				food.id = food.recordId
				food.status = 3
				await updateRecordAPI(food)
				toast('取消成功')
				await this.getList()
			},
		},
		filters: {
			// 时间处理过滤器
			formatDate(value) {
				return parseTime(value, '{y}-{m}-{d}');
			},

		},
	}
</script>

<style lang="scss" scoped>
	/* 页面背景样式 */
	.bg-gradient {
		//宽度 100%
		width: 100%;
		// 最小高度 100vh
		min-height: 100vh;
		// 线性渐变 从blue颜色到rgba(0, 0, 0, 0),渐变区域为200px 

		background:
			// 顶层线性渐变 从上向下有透明渐变到白色，渐变区域为400px
			linear-gradient(to bottom, transparent, #fff 400px),
			// 第二层径向渐变（圆形渐变）半径最大90%宽度 半径最大300px 圆形位于左上角 渐变从#95E0DC到transparent
			radial-gradient(90% 300px at left top, #95E0DC, transparent),
			// 第二层径向渐变（圆形渐变）半径最大60%宽度 半径最大300px 圆形位于右上角 渐变从#D3CBFC到transparent
			radial-gradient(60% 300px at right top, #D3CBFC, transparent);
	}


	.head {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		// 选择head下的所有view和navigator标签
		>view,
		>navigator {
			display: flex;
			justify-content: center;
			align-items: center;
		}

	}

	.order {
		height: 80vh;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;

		.title {
			padding: 20rpx;
		}
	}

	.text {
		font-size: 30rpx;
		font-weight: bold;
		color: green;
	}

	.text-num {
		font-size: 40rpx;
		font-weight: bold;
		color: #9661BC;
		padding-left: 20rpx;
	}

	.items {
		height: 90vh;
	}

	.item {
		margin: 20rpx 20rpx;
	}

	.item-date {
		background: linear-gradient(to right, #95de64, transparent 150px);
		padding: 10rpx;
	}

	.item-food {
		display: flex;
		flex-direction: row;
		border-radius: 20rpx;
		background: #f6ffed;
		margin: 20rpx 0;

		.left-food {
			width: 220rpx;
			height: 220rpx;

			.left-food-img {
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
			}
		}

		.right-food {
			margin: 20rpx;

			.right-name {
				font-size: 30rpx;
				font-weight: bold;
				color: green;
			}
		}
	}
</style>